<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Register Page with Video Background</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }

        #video-background {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -1000;
            object-fit: cover;
        }

        .register-container {
            position: relative;
            z-index: 1;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            width: 350px;
            height: 350px;
            top: -120px; /* Move the div up by 50 pixels */
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .register-container h2 {
            margin-bottom: 20px;
            font-family: 宋体; /* 设置字体为宋体 */
            color: #757575;
            font-size: 50px;
            font-weight: bold;
        }

        .register-container input {
            width: 125%;
            height: 40px;
            padding: 10px;
            margin: 10px 0;
            background-color: transparent;
            border-radius: 5px;
            border: 2px solid #3c3f41; /* 将输入框边框颜色设为黑色 */
        }

        .button-container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            margin-top: 20px;
        }

        .button-container a{
            width: 100%; /* 将按钮的宽度适当调整 */
            padding: 15px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            background-color: transparent;
            color: #757575; /* 修改按钮文本颜色 */
            margin: 5px; /* 添加一些边距 */
            text-decoration: none;
            font-size: 20px;
        }
        .button-container button {
            width: 48%; /* 将按钮的宽度适当调整 */
            padding: 15px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            background-color: transparent;
            color: #757575; /* 修改按钮文本颜色 */
            margin: 1px; /* 添加一些边距 */
            text-decoration: none;
            font-size: 20px;
        }

    </style>
</head>

<body>
    <video id="video-background" autoplay muted loop>
        <source src="img/Register.mp4" type="video/mp4">
    </video>
    <div class="register-container">
        <h2>&ensp;&ensp;&ensp;Register</h2>
        <form action="#">
            <input type="text" placeholder="Username" required><br>
            <input type="password" placeholder="Password" required><br>
            <input type="password" placeholder="Confirm Password" required><br>
            <input type="text" placeholder="Email" required><br>
            <div class="button-container">
                <button type="submit">Register&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</button>
                <a href="Login.html">&ensp;&ensp;Back to Login</a>
            </div>
        </form>
    </div>
</body>

</html>
